<template>
  <div class="audit">
    <div class="title">审核短信</div>
    <div class="search">
      <div class="item time">
        <label>发送时间：</label>
        <el-date-picker
          v-model="time"
          type="date"
          @change="getTime"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="item ipbone">
        <label>手机号码:</label>
        <input type="text" placeholder="手机号码" v-model="iphone">
      </div>
      <el-button type="primary" class="searchs" icon="el-icon-search" @click="search">搜索</el-button>
    </div>

    <div class="table">
      <el-table
        :data="tableData"
        border
        @selection-change="handleSelectionChange"
        :cell-style="{'text-align':'center'}"
        :header-cell-style="{
          'background-color': '#f5f5f5',
          'color':'#666',
          'text-align':'center'
        }"
        style="width: 100%">
        <el-table-column
          prop="phoneNumber"
          label="手机号码"
          width="180">
        </el-table-column>
        <el-table-column
          prop="sendTime"
          label="提交时间"
          width="200">
        </el-table-column>
        <el-table-column
          prop="msgSignature"
          label="短信签名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="msgContent"
          label="短信内容">
        </el-table-column>
        <el-table-column
          prop="msgSendStatus"
          :formatter="dateStatus"
          label="发送状态"
          width="100">
        </el-table-column>
        <el-table-column
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small" @click="accept(scope.row)">
              接受
            </el-button>
            <el-button
              type="danger"
              size="small" @click="rejected(scope.row)">
              驳回
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top: 20px;width:100%;height:50px;">
    <el-button type="danger" @click="batchRejected()"  class="batch-button resove-button">批量驳回</el-button>
    <el-button type="primary" @click="batchAccept()" class="batch-button">批量接受</el-button>
  </div>
  <div class="block" v-if="total>10">
    <el-pagination
      background
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      :page-size="pagesize"
      :current-page="currentPage"
      :total="total">
    </el-pagination>
  </div>
  </div>
</template>
<script>
import {getCookie} from './until/index';
function init(){
  this.$ajax.get('getAuditMessageList.ashx?userId='+getCookie('userid')+'&token='+getCookie('token')+'&phoneNumber='+this.iphone+'&sendTime='+this.time+'&pi='+this.currentPage+'&ps='+this.pagesize)
      .then(res=>{
        if(res.data.code === '200'){
          
          var data = res.data.data.auditList
          this.tableData = data
          this.total = Number(res.data.data.rowsCount)

        }else{

          this.$message.error(res.data.msg+'请退出后重新登录');
        }
      })
      .catch(error=>{
        console.log(error)

      })
  }
export default {
  data () {
    return {
      currentPage:1,//初始页
      pagesize:10,
      total:0,
      time:'',
      iphone:'',
      tableData: [],
      multipleSelection: []
    }
  },
  created () {
    init.call(this)
  },
  methods: {
    // 接受
    accept(row){
      console.log(row)
    },
    // 驳回
    rejected(row){

    },
    // 批量驳回
    batchRejecte(){

    },
    // 批量接受
    batchAccept(){

    },
    // 翻页
    handleCurrentChange: function(currentPage){
      this.currentPage = currentPage;
      init.call(this)
    },
    // 二次处理接收状态
    dateStatus(row, column){
      var date = row[column.property]
      if(date =='1'){
        return '成功接收'
      }else if(date == '2'){
        return '接收失败'
      }else if(date == '3'){
        return '暂未返回'
      }
    },
    search(){
      init.call(this)
    },
    getTime(e){

      if(e){
        var time = e
        var sendTime = time.toLocaleDateString().replace(/\//g, "-") + " " + time.toTimeString().substr(0, 8)
        this.time = sendTime
      }
    },
    handleSelectionChange(val){
      this.multipleSelection = val;
    }
  }
}
</script>
<style scoped>
.audit{
  padding-bottom: 30px;
  min-height: 100vh
}
.search{
  width: 100%;
  background: #fff;
  padding: 20px;
  display: flex;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.title{
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 20px;
}
.item{
  text-align: left;
  float: left;
}
.time label{
  line-height: 35px;
}
.ipbone label{
  margin-left: 50px;
  line-height: 35px;
}
.ipbone input{
  width: 200px;
  height: 36px;
  line-height: 35px;
  border: 1px solid #dcdfe6;
  padding-left: 10px;
  border-radius: 4px;
}
.searchs{
  float: left;
  margin-left: 60px;
}
.table{
  width: 100%;
  background: #fff;
  padding: 20px;
  box-sizing: border-box
}
.batch-button{
  float: right
}
.resove-button{
  margin-left: 50px;
}
</style>
  